<template>
  <router-link to="/proddetail">
    <div class="item" >
  <div class="hd">
    <img :src="item.listPicUrl" alt="">
  </div>
  <div class="name">
    <img src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" alt="">
    {{ item.name }}
  </div>
   <!-- 红包 -->
   <div class="redpage" v-if="item.itemTagList">
    <div v-for="(itemI,index) in item.itemTagList" :key="index">
      <img src="https://yanxuan.nosdn.127.net/static-union/166909947513c0c8.png" alt="">
    <span>{{itemI.name }}</span>
    </div>	

   </div>
 <!-- 价格 -->
  <div class="price">
    <span style="color: #fa1e33; font-size: 16px; font-weight: 800;">￥</span>
    <span class="big"> {{ item.finalPriceInfoVO.priceInfo.basicPrice||item.finalPriceInfoVO.priceInfo.finalPrice.price }}</span>    
    <span class="small"> ￥{{ item.finalPriceInfoVO.priceInfo.counterPrice }}</span>
  </div>
   <slot name="tag">
   </slot>
  
</div>
  </router-link>

</template>

<script lang="ts">
  import { onMounted } from "vue"
import { defineComponent } from "vue"
  export default defineComponent({
    name:'Product',
  })
</script>

<script lang="ts" setup>
const props=defineProps<{
  item:any
}>()

//【页面挂载】
onMounted(() => {
 
})
</script>

<style lang="scss" scoped>
.item{
  width: 180px;
  margin-bottom: 25px;
  .hd {
    img {
      width: 100%;
      border-radius: 10px;
    }
  }
  .name {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 5px;   
    img {
      width: 18px;
      vertical-align: middle;
      margin-right: 5px;
    }
  }
  
  // 红包
  .redpage{
    width: 70px;
    border: 1px solid rgb(121, 120, 120);
    font-size: 12px;
    border-radius: 10px;
    img {
      width: 12px;
      margin-right: 2px;
    }
  }

  //价格
  .price{
    .big{
      color: #fa1e33;
      font-weight: 800;
      font-size: 24px;
    }
    .small{
      color: #999999;
      text-decoration: line-through;
      font-size: 14px;
    }
  }

}

</style>